<template>
  <div>
    <div class="basic_info">
      <div class="title_box">
        <span class="title_line"></span>
        <span class>基本信息</span>
      </div>
      <!-- 信息 -->
      <el-form :label-position="labelPosition" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item class="logo" label="Logo">
              <img src="../../assets/logo.png" alt />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-for="(item,index) in basic" :key="index">
            <el-form-item :label="item.title">
              <el-tag
                type="success"
                size="mini"
                v-if="item.title== '认证状态' && item.content == 1"
              >企业认证</el-tag>
              <el-tag
                type="warning"
                size="mini"
                v-else-if="item.title== '认证状态' && item.content == 2"
              >个人认证</el-tag>
              <el-tag type size="mini" v-else-if="item.title== '认证状态' && item.content == 3">组织认证</el-tag>
              <span v-else>{{item.content}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 列表信息 -->
    <!-- <div class="basic_info list_info">
      <div class="tag">
        <div
          :class="['tag_item', tagIndex == index ?'tag_item_i':'']"
          @click="changeIndex(index)"
          v-for="(item,index) in tagList"
          :key="index"
        >{{item}}</div>
        <div class="tag_scroll" :style="'left:'+90*tagIndex+'px'"></div>
      </div> -->
          <!-- 标签栏 -->
      <el-tabs style="margin-top:20px" size="mini" v-model="activeName">
        <el-tab-pane label="会员列表" name="first">
            <span slot="label"> 会员列表
               <span class="tab-badge">{{vipNum}}</span>
             </span>
        </el-tab-pane>
        <el-tab-pane label="活动列表" name="second">
            <span slot="label"> 活动列表
               <span class="tab-badge">{{activeNum}}</span>
             </span>
        </el-tab-pane>
      </el-tabs>
      <!-- 会员列表 -->
      <div class="vip_list" v-if="!tagIndex">
        <el-table
          border
          :data="vipList"
          size="mini"
          :header-cell-style="{background:'#f8f8f8',color:'#333',borderRight:0}"
          style="width: 100%"
        >
          <el-table-column type="index" width="80" label="序号"></el-table-column>
          <!-- <el-table-column
            v-for="(item,index) in vipheader"
            :key="index"
            :label="item.label"
            :prop="item.prop"
          >
          </el-table-column>-->
          <el-table-column label="ID" prop="ID"></el-table-column>
          <el-table-column label="昵称" prop="nickName"></el-table-column>
          <el-table-column label="真实姓名" prop="realName"></el-table-column>
          <el-table-column label="性别" prop="gender">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.gender == 1" type="danger" size="mini">男</el-tag>
              <el-tag v-else-if="scope.row.gender == 2" type="error" size="mini">女</el-tag>
            </template>
          </el-table-column>
            <el-table-column label="角色" prop="role">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.role == 1" type="danger" size="mini">团长</el-tag>
              <el-tag v-else-if="scope.row.role == 2" type="success" size="mini">管理员</el-tag>
              <el-tag v-else-if="scope.row.role == 3" type="info" size="mini">会员</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="phone" width="140"></el-table-column>
          <el-table-column label="城市" prop="City"></el-table-column>
          <el-table-column label="加入时间" prop="joinTime" width="140"></el-table-column>
          <el-table-column label="等级" prop="vip" width="170">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.vip == 1" type="info" size="mini">普通会员</el-tag>
              <div v-else-if="scope.row.vip == 2">
                <el-tag type="error" size="mini">高级会员</el-tag>
                <el-tag type="success" size="mini">有效时间至：{{scope.row.validTime}}</el-tag>
              </div>
              <el-tag v-else-if="scope.row.vip == 3" type="danger" size="mini">待审核</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="look(scope.row.ID)"
                icon="el-icon-view"
                size="mini"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-box">
          <el-pagination
            background
            small
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="vipList.length"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
      <div v-else>
        <active-list style="margin-top:20px" :handle="true" :list="list.data"></active-list>
        <div class="page-box">
          <el-pagination
            background
            small
            :current-page="list.current_page"
            :page-size="list.per_page"
            layout="total, prev, pager, next, jumper"
            :total="list.total"
            @current-change="changePage"
          ></el-pagination>
        </div>
      </div>
  </div>
</template>

<script>
import activeList from "../active/list-table";
export default {
  components: { activeList },
  data() {
    return {
      activeName:'first',
      vipNum:5,
      activeNum:8,
      currentPage: 1,
      pageSizes: [10, 20, 30, 50],
      pageSize: 10,
      labelPosition: "left",
      tagList: ["会员列表", "活动列表"],
      tagIndex: 0,
      // 会员列表
      vipheader: [
        { label: "ID", prop: "ID" },
        { label: "昵称", prop: "nickName" },
        { label: "真实姓名", prop: "realName" },
        { label: "性别", prop: "gender" },
        { label: "手机号", prop: "phone" },
        { label: "城市", prop: "City" },
        { label: "加入时间", prop: "joinTime" },
        { label: "会员等级", prop: "vip" }
      ],
      vipList: [
        {
          ID: "452156",
          nickName: "wf",
          realName: "忘了",
          gender: "1",
          role:'1',
          City: "合肥",
          phone: "16552546939",
          joinTime: "2020-03-04",
          vip: "1"
          
        },
        {
          ID: "452156",
          nickName: "wf",
          realName: "忘了",
          gender: "2",
          role:'2',
          City: "合肥",
          phone: "16552546939",
          joinTime: "2020-03-04",
          vip: "2",
          validTime: "2021-03-05"
        },
           {
          ID: "452156",
          nickName: "wf",
          realName: "忘了",
          gender: "2",
          role:'3',
          City: "合肥",
          phone: "16552546939",
          joinTime: "2020-03-04",
          vip: "3",
          validTime: "2021-03-05"
        }
      ],
      basic: [
        { title: "跑团ID", content: "2714" },
        { title: "认证状态", content: "3" },
        { title: "跑团名称", content: "葫芦岛悦跑团" },
        { title: "跑团会员", content: "0" },
        { title: "团长信息", content: "彭宏涛(15668970912)" },
        { title: "发布活动", content: "0" },
        { title: "跑团地址", content: "辽宁省葫芦岛市化工路27号" },
        { title: "创建时间", content: "2018-12-21 20:55:38" }
      ],
      form: {
        ID: "2714",
        state: "企业认证",
        runName: "葫芦岛悦跑团",
        vipNum: "0",
        headInfo: "彭宏涛(15668970912)",
        activeNum: "0",
        adress: "辽宁省葫芦岛市化工路27号",
        createTime: "2018-12-21 20:55:38"
      },
      list: {
        current_page: 1,
        data: [
          {
            cover:
              "https://ykp-new.oss-cn-hangzhou.aliyuncs.com//manage/3333.jpg?x-oss-process=image/resize,h_200",
            type: 1,
            name: "团报测试",
            sign_up_start: " 2020-03-14 14:54:43",
            sign_up_end: " 2020-03-14 14:54:43",
            start_time: " 2020-03-14 14:54:43",
            end_time: " 2020-03-14 14:54:43",
            active_limit: "1",
            user_num: "20",
            address: "合肥市未来塔",
            state: 2
          }
        ],
        total: 50
      }
    };
  },
  methods: {
    //分页  活动列表
    changePage(e) {
      this.list.current_page = e;
    },
    handleSizeChange(value) {
      this.pageSize = value;
    },
    handleCurrentChange(value) {
      this.currentPage = value;
    },
    changeIndex(index) {
      this.tagIndex = index;
    },
    // 查看会员信息
    look(id) {
      this.$router.push({ path: "/stage/user/info", query: { id: id } });
    }
  }
};
</script>

<style scoped>
@import url("../../assets/css/team/info/info.css");
</style>